<template lang="html">
  <section class="">
      <!-- <section class="taste-box">
        <div class="">
          <span class="tasteItem" v-for="(list,index) in computedTasteList">{{list.name}}、</span>
        </div>
      </section>
      <h1>{{showAletContainer}}</h1>
      <div class="alet_container" v-show="deleteDialogVisible">
          <section class="tip_text_container">
              <div class="quick_remark">
                  <ul class="remark_arr_list_ul">
                      <li class="remark_arr_list_li" v-for="(item,index) in tasteList" :key="index">
                          <span class="remark_item_li first last "  :class="{choosed:item.choosed}" @click="confirmTaste(foods.id,item)">{{item.name}}</span>
                      </li>
                  </ul>
              </div>
              <div class="confrim" @click=''>关闭</div>
          </section>
      </div> -->
  </section>
</template>

<script>
import {
    mapState, mapMutations
}
from 'vuex'
export default {
  props: ['foods', 'shopId','isShowAletContainer','delTitle'],
    data() {
        return {
            deleteDialogVisible:false,
            showAletContainer:false,
            isChoosed:false,
            tasteList: [{
                "name": "酸",
                "id": 1,
                'choosed':false
            }, {
                "name": "甜",
                "id": 2,
                'choosed':false
            }, {
                "name": "辣",
                "id": 3,
                'choosed':false
            }, {
                "name": "微辣",
                "id": 4,
                'choosed':false
            }, {
                "name": "特辣",
                "id": 5,
                'choosed':false
            }, {
                "name": "超级辣",
                "id": 6,
                'choosed':false
            }, {
                "name": "非常辣",
                "id": 7,
                'choosed':false
            }, {
                "name": "特别辣",
                "id": 8,
                'choosed':false
            }, {
                "name": "变态辣",
                "id": 9,
                'choosed':false
            }, {
                "name": "SB辣",
                "id": 10,
                'choosed':false
            }, {
                "name": "狂霸辣",
                "id": 11,
                'choosed':false
            }, {
                "name": "辣死人",
                "id": 12,
                'choosed':false
            }],
            tasteDatas:[]
        }
    },
    computed: {
        ...mapState([
                'cartList'
            ]),
            /**
             * 监听cartList变化，更新当前商铺的购物车信息shopCart，同时返回一个新的对象
             */
            shopCart: function() {
                return Object.assign({}, this.cartList[this.shopId]);
            },
            //shopCart变化的时候重新计算当前商品的数量
            computedTasteList: function() {
                    let food_id = this.foods.id;
                    if (this.shopCart&&this.shopCart[food_id]) {
                        let tasteLists = [];
                        Object.values(this.shopCart[food_id]).forEach((item,index) => {
                            for(var i in this.tasteList){
                              for(var j in item.tasteList){
                                if(this.tasteList[i].id==item.tasteList[j].id){
                                  this.tasteList[i].choosed = true
                                }
                              }
                            }
                            tasteLists = item.tasteList
                        })
                        return tasteLists;
                    }else {
                        return '';
                    }
            },
    },
    mounted(){
      console.log()
    },
    methods:{
      childMethod(){
          this.deleteDialogVisible = true
      },
      ...mapMutations([
              'CONFIRM_TASTEADD'
          ]),
          tasteChildMethod(){
            // this.showAletContainer = true
          },
      tasteSel(item){
        console.log(item)
        item.choosed = !item.choosed
      },
      confirmTaste(food_id,item){
        if(item.choosed==false){
          item.choosed = true
          this.tasteDatas.push(item)
        }else{
          item.choosed = false
          this.removeByValue(this.tasteDatas,item)
        }

        let tasteDatas = this.tasteDatas
        this.CONFIRM_TASTEADD({
            shopid: this.shopId,
            food_id,
            tasteDatas
        })
        // console.log(tasteDatas)
      },
      removeByValue(arr, val){
        for(var i=0; i<arr.length; i++) {
          if(arr[i] == val) {
            arr.splice(i, 1);
            break;
          }
        }
      }
    }
}
</script>

<style lang="scss" scoped>

@import '../../style/mixin.scss';
.taste {
    @include sc(0.5rem, #c00);
    display: inline-block;
    @include wh(2.5rem,0.6rem);
}

.checkbox {
    @include wh(1rem, auto);
}

.alet_container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    background-color: rgba(0, 0, 0, .1);
}

.tip_text_container {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -45%;
    margin-left: -45%;
    width: 90%;
    animation: tipMove .4s;
    background-color: rgba(255, 255, 255, 1);
    border: 1px;
    padding-top: .6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: 1px;
    border-radius: 0.25rem;
    .confrim {
        @include sc(.8rem, #fff);
        font-weight: bold;
        margin-top: .8rem;
        background-color: #4cd964;
        width: 100%;
        text-align: center;
        line-height: 1.8rem;
        border: 1px;
        border-bottom-left-radius: 0.25rem;
        border-bottom-right-radius: 0.25rem;
    }
}

.quick_remark {
    background-color: #fff;
    margin-top: .4rem;
    padding: 0 .6rem;
    ul {
        display: flex;
        flex-wrap: wrap;
        li {
            margin-right: .6rem;
            margin-bottom: .6rem;
            span {
                @include sc(.5rem, #333);
                padding: .3rem .6rem;
                border: 0.025rem solid #3190e8;
                border-left: 0;
            }
            .first {
                border-left: 0.025rem solid #3190e8;
                border-top-left-radius: .2rem;
                border-bottom-left-radius: .2rem;
            }
            .last {
                border-top-right-radius: .2rem;
                border-bottom-right-radius: .2rem;
            }
            .choosed {
                color: #fff;
                background-color: #3190e8;
            }
        }

    }
}
.taste-box{
  line-height: 0.5rem;
}
.tasteItem{
    @include sc(.5rem, #333);
}
</style>
